// 列表页面的逻辑实现

// 获取元素
const cateBox = document.querySelector('.cate')
const contentBox = document.querySelector('.content')
const paginationBox = document.querySelector('.pagination')
const filterBox = document.querySelector('.filter')
const saleBox = document.querySelector('.sale')
const sortBox = document.querySelector('.sort')
const searchBox = document.querySelector('.search')

// 就是获取分类信息 渲染到页面上

// 定义一个函数
setCateGory()
async function setCateGory() {
    // 发送请求去获取数据
    let res = await pAjax({
        url: 'http://localhost:8888/goods/category',
        datatype: 'json'
    })
    // console.log(res);
    // 把拿到的数据渲染到页面上
    let str = '<li class="active">全部</li>'
    res.list.forEach(function (item) {
        str += `
        <li>${item}</li>
        `
    })
    cateBox.innerHTML = str
}

// 就是获取到商品的信息渲染到页面上

// 首先要定义一个对象 里面保存的就是筛选条件
let info = {
    current: 1,
    pagesize: 12,
    search: '',
    filter: '',
    saleType: 10,
    sortType: 'id',
    sortMethod: 'ASC',
    category: ''
}
// 发送请求
getGoodsList()
async function getGoodsList() {
    let res = await pAjax({
        url: 'http://localhost:8888/goods/list',
        data: info,
        datatype: 'json'
    })
    console.log(res);

    // 渲染页面
    let str = ''
    res.list.forEach(function (item) {
        str += `
        <li data-id="${item.goods_id}">
            <div class="show">
                <img src="${item.img_big_logo}" alt="">
                <span class="hot ${item.is_hot ? 'active' : ''}">热销</span>
                <span class="sale ${item.is_sale ? 'active' : ''}">折扣</span>
            </div>
            <div class="info">
                <p class="title"> ${item.title}</p>
                <p class="price">
                    <span class="current">￥ ${item.current_price}</span>
                    <span class="old">￥ ${item.price}</span>
                </p>
                <button class="addCart" data-id="${item.goods_id}">加入购物车</button>
            </div>
        </li>
        
        `
    })

    contentBox.innerHTML = str

    // 渲染分页
    paginationBox.innerHTML = `
        <p>分页</p>
        <div>
            <span class="left${info.current === 1 ? ' disable' : ''}">&lt;</span>
            <span>${info.current}/ ${res.total}</span>
            <span class="right${info.current === res.total ? ' disable' : ''}">&gt;</span>
        </div>
        <select>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24">24</option>
        </select>
        <input type="text" value="${info.current}">
        <button data-total="${res.total}">跳转</button>
    `

    let select = document.querySelector('select')
    select.value = info.pagesize
}

// 各种按钮的点击事件
// 分类点击事件
cateBox.addEventListener('click', e => {
    e = e || window.event
    let target = e.target || e.srcElement

    // 判断是不是li标签
    if (target.nodeName !== 'LI') return

    // 去掉所有的类名
    for (let i = 0; i < cateBox.children.length; i++) {
        cateBox.children[i].classList.remove('active')
    }
    // 给对应的加上类名
    target.classList.add('active')

    info.category = target.innerText === '全部' ? '' : target.innerText

    info.current = 1
    // 重新渲染页面
    getGoodsList()
})

// 筛选点击事件
filterBox.addEventListener('click', (e) => {
    e = e || window.event
    let target = e.target || e.srcElement
    // 判断是不是li标签
    if (target.nodeName !== 'LI') return
    // 去掉所有的类名
    for (let i = 0; i < filterBox.children.length; i++) {
        filterBox.children[i].classList.remove('active')
    }
    // 给对应的加上类名
    target.classList.add('active')

    info.filter = target.dataset.type

    info.current = 1
    // 重新渲染页面
    getGoodsList()
})

// 折扣事件
saleBox.addEventListener('click', e => {
    e = e || window.event
    let target = e.target || e.srcElement
    // 判断是不是li标签
    if (target.nodeName !== 'LI') return
    // 去掉所有的类名
    for (let i = 0; i < saleBox.children.length; i++) {
        saleBox.children[i].classList.remove('active')
    }
    // 给对应的加上类名
    target.classList.add('active')

    info.saleType = target.dataset.type

    info.current = 1
    // 重新渲染页面
    getGoodsList()
})

// 排序事件
sortBox.addEventListener('click', e => {
    e = e || window.event
    let target = e.target || e.srcElement
    // 判断是不是li标签
    if (target.nodeName !== 'LI') return
    // 去掉所有的类名
    for (let i = 0; i < sortBox.children.length; i++) {
        sortBox.children[i].classList.remove('active')
    }
    // 给对应的加上类名
    target.classList.add('active')

    info.sortType = target.dataset.type
    info.sortMethod = target.dataset.method

    info.current = 1
    // 重新渲染页面
    getGoodsList()
})

// 搜索事件
searchBox.addEventListener('input', () => {
    info.search = searchBox.value.trim()
    info.current = 1
    // 重新渲染页面
    getGoodsList()
})

// 分页事件
paginationBox.addEventListener('click', (e) => {
    e = e || window.event
    let target = e.target || e.srcElement
    if (target.className === 'left') {
        info.current--
        // 重新渲染页面
        getGoodsList()
    }
    if (target.className === 'right') {
        info.current++
        // 重新渲染页面
        getGoodsList()
    }

    if (target.nodeName === 'BUTTON') {
        // 获取到上一个元素的值
        let n = target.previousElementSibling.value - 0
        // 获取总页数
        let total = target.dataset.total - 0
        console.log(total);
        // 对获取到数据进行验证
        if (!n) n = 1
        if (n < 1) n = 1
        if (n > total) n = total
        info.current = n

        getGoodsList()
        // console.log(n);
    }

})

paginationBox.addEventListener('change', (e) => {
    e = e || window.event
    let target = e.target || e.srcElement
    if (target.nodeName === 'SELECT') {
        info.pagesize = target.value
        getGoodsList()
    }
})

// 点击每一个商品能去到详情页面

contentBox.addEventListener('click', (e) => {
    e = e || window.event
    let target = e.target || e.srcElement
    if (target.nodeName === "LI") {
        // 代码能执行到这里说明是li
        // 保存到浏览器中
        window.sessionStorage.setItem('goodsId', target.dataset.id)
        // 去到详情页面
        window.location.href = './detail.html'
    }

    if (target.nodeName === 'BUTTON') {

        addCart(target.dataset.id)
    }
})


// 点击加入购物车 能把商品加入到购物车中
async function addCart(goodsId) {

    // 首先要判断是不是处于登录状态
    const id = window.localStorage.getItem('id')
    const token = window.localStorage.getItem('token')
    if (!id || !token) {
        if (window.confirm('您还没有登录,点击取消留在本页面,点击确定去登录')) {
            window.location.href = './登录页面.html'
        }
        return
    }

    // 发送请求获取数据
    let res = await pAjax({
        url: 'http://localhost:8888/cart/add',
        method: 'post',
        data: { id, goodsId },
        datatype: 'json',
        headers: { 'authorization': token }
    })

    if (res.code !== 1) {
        if (window.confirm('您还没有登录,点击取消留在本页面,点击确定去登录')) {
            window.location.href = './商品首页.html'
        }
        return
    }

    // 说明成功
    alert('恭喜您添加购物车成功')
    console.log(res);

}

